<!--
 * @Descripttion:
 * @version: 1.0
 * @Author: Teemor
 * @Date: 2024-03-15 10:40:28
-->
<template>
  <view class="iconBox flex grid-justify-center" :class="statusObj[status].class">
    <uv-icon :name="name" custom-prefix="custom-icon" :size="size" color="#fff"></uv-icon>
  </view>
</template>

<script setup>
const props = defineProps({
  status: {
    type: Number,
    default: 1,
  },
  size: {
    type: Number,
    default: 30,
  },
})
const { status } = toRefs(props)

const statusObj = {
  1: { color: '#85E5C5', class: 'working', name: '运行中', icon: 'yunhang' },
  2: { color: '#A8C8FF', class: 'shutdown', name: '停机', icon: 'daiji' },
  3: { color: '#CEC4FF', class: 'standby', name: '待机', icon: 'daiji1' },
  4: { color: '#FFC2AD', class: 'fault', name: '故障', icon: 'accident-1' },
  5: { color: '#85E5C5', class: 'install', name: '待安装', icon: 'a-anzhuang2' },
}
const name = computed(() => {
  return statusObj[status.value].icon
})
</script>

<style lang="scss" scoped>
.iconBox {
  width: 92rpx;
  height: 92rpx;
  background: #85e5c5;
  border-radius: 35rpx;

  &.working,
  &.install {
    background: #85e5c5;
  }

  &.shutdown {
    background: #a8c8ff;
  }

  &.standby {
    background: #cec4ff;
  }

  &.fault {
    background: #ffc2ad;
  }
}
</style>
